<template>
    <div class="chart-container" ref="chartContainer"></div>
</template>

<script setup>
import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
    chartData: {
        type: Array,
        required: true,
        default: () => []
    }
});

const chartContainer = ref(null);
let chart = null;

const initChart = () => {
    if (!chartContainer.value) return;

    chart = echarts.init(chartContainer.value);

    const option = {
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                const data = params[0].data;
                return `
            <div style="font-weight: bold; margin-bottom: 5px;">${data.time}</div>
            <div>AQI: ${data.value}</div>
            <div>等级: ${data.level}</div>
            <div>主要污染物: ${data.mainPollutant}</div>
          `;
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: props.chartData.map(item => item.time),
            axisLine: {
                lineStyle: {
                    color: '#999'
                }
            },
            axisLabel: {
                color: '#666'
            }
        },
        yAxis: {
            type: 'value',
            name: 'AQI',
            nameTextStyle: {
                color: '#666'
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#999'
                }
            },
            axisLabel: {
                color: '#666'
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#ddd'
                }
            }
        },
        visualMap: {
            show: false,
            pieces: [
                { min: 0, max: 50, color: '#52c41a' },
                { min: 51, max: 100, color: '#91d5ff' },
                { min: 101, max: 150, color: '#faad14' },
                { min: 151, max: 200, color: '#fa8c16' },
                { min: 201, max: 300, color: '#f5222d' },
                { min: 301, max: 500, color: '#722ed1' }
            ],
            outOfRange: {
                color: '#999'
            }
        },
        series: [
            {
                name: 'AQI',
                type: 'line',
                smooth: true,
                lineStyle: {
                    width: 3
                },
                showSymbol: false,
                data: props.chartData.map(item => ({
                    value: item.value,
                    time: item.time,
                    level: item.level,
                    mainPollutant: item.mainPollutant
                })),
                markLine: {
                    silent: true,
                    lineStyle: {
                        color: '#333'
                    },
                    data: [
                        {
                            yAxis: 50,
                            name: '优',
                            lineStyle: { color: '#52c41a' }
                        },
                        {
                            yAxis: 100,
                            name: '良',
                            lineStyle: { color: '#91d5ff' }
                        },
                        {
                            yAxis: 150,
                            name: '轻度污染',
                            lineStyle: { color: '#faad14' }
                        },
                        {
                            yAxis: 200,
                            name: '中度污染',
                            lineStyle: { color: '#fa8c16' }
                        },
                        {
                            yAxis: 300,
                            name: '重度污染',
                            lineStyle: { color: '#f5222d' }
                        }
                    ]
                },
                areaStyle: {
                    opacity: 0.3,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(24, 144, 255, 0.8)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(24, 144, 255, 0.1)'
                        }
                    ])
                }
            }
        ],
        animation: true,
        animationDuration: 1000,
        animationEasing: 'cubicInOut'
    };

    chart.setOption(option);

    window.addEventListener('resize', resizeChart);
};

const updateChart = () => {
    if (!chart) return;

    chart.setOption({
        xAxis: {
            data: props.chartData.map(item => item.time)
        },
        series: [
            {
                data: props.chartData.map(item => ({
                    value: item.value,
                    time: item.time,
                    level: item.level,
                    mainPollutant: item.mainPollutant
                }))
            }
        ]
    });
};

const resizeChart = () => {
    chart && chart.resize();
};

watch(() => props.chartData, () => {
    updateChart();
}, { deep: true });

onMounted(() => {
    initChart();
});

onBeforeUnmount(() => {
    if (chart) {
        chart.dispose();
        chart = null;
    }
    window.removeEventListener('resize', resizeChart);
});
</script>

<style scoped>
.chart-container {
    width: 100%;
    height: 300px;
}
</style>